<template>
  <div class="w-[375px] mb-[50px]">
    <el-image src="/mobilehead.png" class="w-1/1 align-bottom"></el-image>
    <div class="min-h-[550px] w-1/1 bg-[rgb(244,245,249)]"></div>
    <div class="h-[50px] w-1/1 relative z-1">
      <el-image src="/menu.png" class="w-1/1 h-1/1 absolute"></el-image>
      <div
        v-show="menu.button.length === 0"
        class="relative z-2 ml-43px w-[calc(100%-45px)]] h-1/1 text-[14px] border border-dashed border-[2px] border-[#07c160]"
        @click.stop="push(menu.button, 1)"
      >
        <div class="w-1/1 h-1/1 flex flex-col justify-center">
          <div class="flex flex-row justify-center cursor-pointer text-[#07c160]">
            <el-icon size="14" class="mr-[3px]"><Plus /></el-icon>
            <span class="text-center align-bottom"> 添加菜单</span>
          </div>
        </div>
      </div>
      <div
        v-show="menu.button.length !== 0"
        class="relative z-2 ml-50px w-[calc(100%-45px)]] h-1/1 text-[14px] flex flex-row justify-start"
      >
        <div
          v-for="p in menu.button"
          :key="p.key"
          v-show="menu.button.length !== 0"
          :class="[
            'flex-1',
            'cursor-pointer',
            'text-[#000]',
            'box-border',
            'relative',
            p.key === nowChoose ? 'border border-solid border-[1px] border-[#07c160] !text-[#07c160]' : ''
          ]"
          @click.stop="chooseMenu(p)"
        >
          <div class="text-center justify-center flex flex-col h-1/1 text-[14px] relative">
            <span>{{ p.name }}</span>
            <div
              v-show="p.key === nowChoose || isInChild(p.sub_button)"
              class="absolute w-1/1 border border-solid border-[#E7E7EB] border-[1px] bottom-[70px] bg-[var(--el-bg-color)]"
            >
              <div
                v-for="j in p.sub_button"
                :key="j.key"
                :class="[
                  'flex',
                  'flex-col',
                  'justify-center',
                  'h-[48px]',
                  'text-[#000]',
                  'relative',
                  j.key === nowChoose ? 'border border-[1px] !text-[#07c160] border-[#07c160]' : ''
                ]"
                @click.stop="chooseMenu(j)"
              >
                <div class="text-center">
                  <span>{{ j.name }}</span>
                </div>
                <div class="absolute right-[-50px] top-[-50%] transform translate-y-[50%]" v-show="j.key === nowChoose">
                  <small-tool
                    :is-show-back="p.sub_button[0].key !== j.key"
                    :is-show-right="p.sub_button[p.sub_button.length - 1].key !== j.key"
                    v-model:now-list="p.sub_button"
                    align="horizontal"
                    :now-index="j.key"
                  ></small-tool>
                </div>
              </div>
              <div
                v-show="p.sub_button?.length !== 5 || !p.sub_button"
                class="h-[48px]"
                @click.stop="push(p.sub_button, 2, p.key)"
              >
                <div class="flex justify-center flex-col h-1/1 text-[#000]">
                  <div class="text-center">
                    <el-icon size="14" class="h-1/1"><Plus /></el-icon>
                    <span class="align-middle relative top-[-2.5px] ml-[3px]">添加</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="absolute bottom-[-50px] left-[50%] transform translate-x-[-50%]" v-show="p.key === nowChoose">
              <small-tool
                :is-show-back="menu.button[0].key !== p.key"
                :is-show-right="menu.button[menu.button.length - 1].key !== p.key"
                v-model:now-list="menu.button"
                :now-index="p.key"
              ></small-tool>
            </div>
          </div>
        </div>
        <div v-show="menu.button.length !== 3" class="flex-1 h-1/1 cursor-pointer" @click="push(menu.button, 1)">
          <div :class="['!text-center', 'flex', 'flex-col', 'justify-center', 'font-bold', 'h-1/1']">
            <div class="flex flex-row justify-center">
              <el-icon size="24" color="#07c160"><Plus /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Menu, buttons } from "@/views/app/wechat/menus/interface/index";
import smallTool from "./smallTool.vue";
import { generateUUID } from "@/utils";
import md5 from "js-md5";

interface Props {
  menu: Menu;
  menuKey?: string;
}

const props = withDefaults(defineProps<Props>(), {
  menu() {
    return { button: [] };
  }
});

// const menu = reactive<Menu>({ button: [] });

// const nowIndex = ref(""); //自增
const nowChoose = ref(""); //当前选择的菜单

// 判断选择中的是否为子菜单
const isInChild = (buttons: buttons[]) => {
  console.log(buttons);
  const index = buttons.findIndex(e => e.key === nowChoose.value);
  return index !== -1;
};

// 添加菜单
const push = (list: buttons[], level: 1 | 2, p_key: string = "") => {
  const key = md5(generateUUID());
  if (level === 1 && list.length < 3) {
    list.push({
      name: "菜单名称",
      type: "click",
      sub_button: [],
      key,
      level: 1,
      p_key: ""
    });
  } else if (level === 2 && list.length < 5) {
    list.unshift({
      name: "菜单名称",
      type: "click",
      sub_button: [],
      key,
      level: 2,
      p_key
    });
  }
  nowChoose.value = key;
  emits("buttons", { menu: props.menu, key: nowChoose.value });
};
// 点击选择菜单
const chooseMenu = (p: buttons) => {
  nowChoose.value = p.key as string;
  emits("buttons", { menu: props.menu, key: nowChoose.value });
};

// 获取当前的按钮列表以及选择的index
const emits = defineEmits(["buttons"]);

// 设置当前的按钮
const setMenu = (val: Menu) => {
  props.menu.button = [...val.button];
};

defineExpose({ setMenu });
</script>

<style></style>
